


$(document).ready(function(){

	var canvas = document.getElementById("myCanvas");
	var context = canvas.getContext("2d");
	
	var color = "";
	
	var drawing = false;
	var circle = false;
	var box = false;
	var line = false;
	
	var lastPosX = 0;
	var lastPosY = 0;
	
	function deSelect(){
		circle = false;
		freehand = false;
		line = false;
	}
	$("#freehand").mousedown(function(e){ 
		deSelect();
		freehand = true;
	});
	$("#circle").mousedown(function(e){
		deSelect();
		circle=true;        	
	});
	$("#line").mousedown(function(e){
		deSelect();
		line = true;
	});
	$("#black").mousedown(function(e){
		color = "black";
	});
	$("#red").mousedown(function(e){
		color = "red";
	});
	
	$("#myCanvas").mousedown(function(e){
		lastPosX = e.pageX - this.offsetLeft;
		lastPosY = e.pageY - this.offsetTop;
		drawing =  true;	
	});
	$("#myCanvas").mouseup(function(e){
		drawing = false;
	});
	
	$("#myCanvas").mousemove(function(e){
		if(drawing){
			context.fillStyle ="blue";
			var x = e.pageX - this.offsetLeft;
			var y = e.pageY - this.offsetTop;
				
			if(freehand){
				context.beginPath();
				context.moveTo(x,y);
				context.lineTo(lastPosX,lastPosY);
		
				lastPosX = x;
				lastPosY = y;
				<!--context.fillRect(x,y,5,5);-->
				context.closePath();
				context.stroke();
			}
			
			if(circle){
				context.beginPath();
				context.arc(x, y, 10, 0, Math.PI*2, true); 
				context.closePath();
				context.fill();
			}
			if(line){
				context.beginPath();
				context.moveTo(5,5);
				context.lineTo(x,y);
				context.stroke();
			}
		}
	});
});

